*{
    padding:0;
}
a{
    text-decoration: none;
}
li{
    list-style: none;
    }
em,i{
    font-style: normal;
}

html,body{
    height: 100%;
    width: 100%;
}
.container {
      margin-right: auto;
      margin-left: auto;
      padding-right: 15px;
      padding-left: 15px;
      width: 100%;
  }
  
@media (min-width: 576px) {
      .container {
      max-width: 540px;
      }
  }
  
@media (min-width: 768px) {
      .container {
      max-width: 720px;
      }
  }
  
@media (min-width: 992px) {
      .container {
      max-width: 960px;
      }
  }
  
@media (min-width: 1200px) {
      .container {
      max-width: 1140px;
      }
  }
  @mixin line ($borderwidth:1px ,$borderstyle:solid ,$bordercolor:#ccc){
border:$borderwidth $borderstyle $bordercolor;
  }
  $colors:red #ccc #fff black #333 #d5b589 lightgrey #ffeced;
  /* 轮播 */
  .box {
      width: 300px;
      height: 100px;
      position: relative;
      top: 300px;
      overflow: hidden;

  }

  /* 无缝1-1：注意容器尺寸 */
  .imgbox {
      width: 400px;
      height: 50px;
      position: absolute;
      img {
          width: 50px;
          height: 50px;
          float: left;
          padding: 0 5px;
          box-sizing: border-box;
      }
     img.active {
        @include line($bordercolor:red);
    }
  }


  .btns input {
      position: absolute;
      width: 20px;
      height: 50px;
      background: rgba(200, 200, 200, 0.7);
      border: none;
      cursor: pointer;
     &:hover {
          background: rgba(150, 150, 255, 0.7);
          color: nth($colors, 3);
      }
      &:active {
          background: rgba(0, 0, 255, 0.7);
          color: nth($colors, 3);
      }
  }



  .left {
      left: 0
  }

  .right {
      right: 0
  }

  /* 选项卡 */
  .box1 .cont .item {
      display: none;
      width: 300px;
      height: 300px;
      position: absolute;
     img {
          width: 300px;
          height: 300px;
      }
  }


  /* 放大镜 */
  .l_box_bgbox{
      background: nth($colors, 1);
      position: absolute;
      top: 150px;
      left:50px
  }
  .l_box {
      position: absolute;
      width: 300px;
      height: 300px;
      left: 500px;
      display: none;
      overflow: hidden;
      top: 62px;
      z-index: 123;


      img {
          position: absolute;
          left: 0;
          top: 0;
      }
  }


  .box1 .cont .item span {
      position: absolute;
      left: 0;
      top: 0;
      background: rgba(255, 100, 100, 0.5);
      display: none;
  }

 .box1 .cont .item em {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
  }
/* 放大镜 */

/* 筛选 */
main{
    width: 1090px;
    margin:0 auto;
    overflow: hidden;
    nav{
        border-bottom:1px solid #ccc ;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .nav_left{
            display: flex;
            font-size: 13px;
            .nav_left_1{
            color: nth($colors, 2);
            }
            .nav_left_2{
            height: 18px;
            @include line();
            position: relative;
            ul{
                width: 500px;
                position: absolute;
                top: 18px;
                @include line();
                background-color: nth($colors, 3);
                display:none ;
                padding-bottom:10px ;
                z-index: 100;
                li{
                    padding-left:10px ;
                    padding-right:60px ;
                    padding-top: 10px;
                    display: inline-block;
                }
            }
            a{
                color: nth($colors, 4);
                display: block;
                /* background: red; */
                padding-left: 8px;
                padding-right: 20px;
                background: url(../images/nav_left_1.png) right center no-repeat;
                &:hover{
                    color: nth($colors, 1);
                    border-bottom:0;
                    z-index: 10;
                }
            }
            &:hover ul{
                display: block;
            }
            }
            .nav_left_3{
                width: 80px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: nth($colors, 2);
            }
        }
        .nav_right{
            @extend .nav_left;
          .nav_right_1{
                width: 55px;
                font-size: 13px;
                height: 20px;
                border-radius: 10px;
                @include line($bordercolor:#d5b589);
                color: nth($colors, 6);
                margin-right: 5px;
                padding-left: 20px;
                background: url(https://kaola-pop.oss.kaolacdn.com/6e2c61f8-d750-4081-865d-88ad8fdb454d?x-oss-process=image/resize,w_30/quality,q_85) 5px 2px no-repeat ;
                background-size: 13px 13px;
            }
           .nav_right_2 a{
                margin-right: 5px;
                color: nth($colors, 4);   
                &:hover{
                text-decoration: underline;
                }
            }
            .nav_right_3 a{
                color: nth($colors, 4);
                &:hover{
                text-decoration: underline;
                }
            }
        }
        span{
            margin:0 3px ;
        }
    }
}

/* 筛选 */

/* 商品详情 */
.bigbox{
    position: relative;
    height: 400px;
    /* background: pink; */
    width: 700px;
  top:-100px;
  left: 350px;
}

.goods_datail{
    position: absolute;
    width: 790px;
    top: 0px;
    font-size: 14px;
   .goods_datail_1{
    display: flex;
    color: nth($colors, 2);
    height: 54px;
    line-height: 54px;
    align-items: center;
    
    span{
        padding: 0 5px;
        
    }
    img{
        width: 25px;
        height: 25px;
        border-radius: 50%;
        
    }
    }
   h3{
        font-size: 18px;
    }
   .goods_datail_2{
        line-height: 40px;
        height: 40px;
    }
   .goods_datail_3{
        display: flex;
        background-color: lightgrey;
        height: 83px;
        border-top:1px dashed #ccc ;
        border-bottom:1px dashed #ccc ;
    
      .p1{
            padding: 20px 50px 0 10px;
        }
    .price{
            margin-right:230px;
            .price_1{
                line-height: 50px;
                height: 50px;
                strong{
                    font-size: 18px;
                    color: nth($colors, 1);
                }
                span{
                    font-size: 12px;
                    width: 35px;
                    height: 18px;
                    padding: 0 5px;
                }
            }
        }
       .price .price_2{
            display: flex;
            font-size: 12px;
            padding-bottom: 18px;
            span{
                font-size: 12px;
                width: 15px;
                height: 15px;
            margin-right: 10px;
            }
            p a{
            text-decoration: underline;
            }
            .goods_datail .goods_datail_3 .p2{
                padding-top: 45px;
                span{
                    color: nth($colors, 1);
                }
            }
        }
    }
    .goods_datail_4{
        display: flex;
        padding-top:10px ;
       .p3{
            padding: 0px 50px 0 10px;
        
        }
        span{
            padding-right: 18px;
        }
       select{
            width: 140px;
            height: 20px;
            @include line();
            margin-right: 20px;
        }
    }
    .goods_datail_5{
        display: flex;
        padding-top: 10px;
        .p4{
            padding: 0px 50px 0 10px;
        }
        .goods_datail_5_road{
        font-size: 12px;
        p em{
        font-style: normal;
        color: nth($colors, 1);
        }
        .goods_datail_5_road_path{
        display: flex;
        
        dl dt img{
            border-radius: 50%;
        }
        }
        }
    }
    .goods_datail_6{
        display:flex;
        padding-top: 10px;
    
        .p6{
            padding: 0px 50px 0 10px;
        }
        .goods_datail_6_number{
            width: 100px;
            height: 25px;
            text-align: center;
            display: flex;
            @include line();
            margin-right: 20px;
            span{
                width: 20px;
                height: 25px;
                background: nth($colors, 7);
                align-self: center;
                display: block;
                line-height: 25px;
            }
            input{
                width: 60px;
                outline: 0;
                height: 25px;
                line-height: 25px;
                border: 0;
                text-align: center;
            }
        }
       .p7{
            color: nth($colors, 1);
        }
    }
    .goods_datail_7{
        display: flex;
        padding-top: 10px;
        font-size: 16px;
        .goods_datail_7_buy{
            width: 155px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            margin-right: 20px;
            background: nth($colors,8);
            @include line($bordercolor:red);
            color: nth($colors, 1);
        }
        .goods_datail_7_car{
            width: 155px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            margin-right: 20px;
            background: nth($colors, 1);
            color: nth($colors, 3);
        }
    }
}
/* 商品详情 */
/* banner */
main figcaption{
height: 60px;
line-height: 60px;
margin-top: 50px;
}
main article{
 @include line();
padding: 10px 0 10px 30px;
display: flex;
flex-wrap: wrap;
dl{
    display: block;
    width: 140px;
    font-size: 12px;
    margin-right: 35px;
    padding-bottom:20px ;

    dt img{
        width: 140px;
    }
    dd a{
        color: nth($colors, 4);
        &:hover{
            text-decoration: underline;
        
        }
    }
    dd strong{
        font-size: 16px;
        color: nth($colors, 1);
    }
   dd em{
        font-style: normal;
        font-size: 12px;
        color: nth($colors, 2);
    }
}
}
/* banner */

/* details list */
.banner_good_box{
    overflow: hidden;

table{
   width: 888px;
   @include line();
   margin-top: 50px;
   border-collapse: collapse;
   float: right;
   z-index: -1;
   
   tr:nth-child(odd){
       background: nth($colors, 2);
       @include line();
   }
   thead{
       font-weight: bold;
       text-align: left;
       position: sticky;
       tr th:nth-child(1) em{
           width: 160px;
           border-top: 6px solid red;
           padding: 30px 50px;
           float: left;
           background: nth($colors,3);
           &:hover{
               color: nth($colors, 1);
           }
       }
      tr th:nth-child(1) i{
           height: 50px;
           margin:35px 50px ;
         float: left;
         strong{
         color: nth($colors, 1);
         }
       }
   }
  tbody tr td span{
      padding: 0 50px 0 10px;
   }
   tbody tr td .cont1{
       width: 40px;
       height: 40px;
       border-radius: 50%;
       font-size: 22px;
       color: nth($colors, 3);
       font-weight: bold;
       background: nth($colors, 1);
       text-align: center;
       float: left;
       line-height:40px ;
       margin: 20px 20px;
   
   }
  tbody tr td .cont2{
       line-height:25px;
       margin: 20px 0;
   }
   tbody tr.goods_pic_text p{
       padding: 20px;
       line-height: 30px;
   }
  tbody tr.goods_pic_text h3{
       text-align: center;
       padding: 50px 0;
   }
   tbody tr.goods_pic td img{
   width: 100%;
   padding: 10px 0;
   }
}
.banner_goods{
    width: 150px;
    margin-top: 50px;
    float: left;
    dl{
    width: 150px;
    @include line();
    margin-bottom: 15px;
    display: block;
    font-size: 12px;
    margin-right: 35px;
    padding: 10px 10px 20px 10px;
    
        dt img{
            width: 100%
        }
        dd a{
            color: nth($colors, 4);
            &:hover{
                text-decoration: underline;
            
            }
        }
        dd strong{
            font-size: 16px;
            color: nth($colors, 1);
        }
        dd em{
            font-style: normal;
            font-size: 12px;
            color: nth($colors, 2);
        }
    }
   dl#title{
        text-align: center;
        font-size: 14px;
        dt{
           font-size: 26px;
           font-weight: bold;
           line-height: 80px;
           height: 80px;
        }
        dd{
            margin: 10px 0;
            font-size: 12px;
            color: nth($colors, 2);
           img{
               width: 18px;
               height: 18px;
            }
            p{
                width: 30px;
                height: 25px;
                color: nth($colors, 3);
                padding: 0 30px;
                line-height:25px;
                background:nth($colors, 5);
                margin: 0 30px 20px 30px;
            }
        }
    }
}
}
/* details list */

